<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bar</title>
    <script src="../echarts.min.js"></script>
</head>
<body style="background:#0B0D39">
    <!-- 为ECharts准备一个具备大小（宽高）的DOM -->
    <div id="main" style="width: 50%; height: 500px"></div>

    <script>
        // 基于准备好的DOM，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图标的配置项和数据
        let option = {
            color: ['#5554FF', '#60E960', '#FF9E33', '#FFD82E'],
            textStyle: {
                color: '#fff'
            },
            legend: {
                orient: 'vertical',
                top: '0',
                left: '80%',
                borderColor: '#1465A6',
                borderWidth: 2,
                borderRadius: 2,
                padding: 20,
                itemWidth: 30,
                // itemHeight: 30,
                itemGap: 20,// 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
                textStyle: {
                    color: '#fff'
                },
            },
            tooltip: {},
            dataset: {
                // 提供一份数据。
                source: [
                    ['product', 0, 5, 10, 15, 20, 25],
                    ['1#', 41.1, 30.4, 65.1, 53.3, 43,2],
                    ['2#', 86.5, 92.1, 85.7, 83.1, 22, 67],
                    ['3#', 24.1, 67.2, 79.5, 86.4, 45, 34]
                ]
            },
            grid: {
                // show: true,
                top: '20%',
                left: '4%',
                right: '30%',
                bottom: '10%',
                containLabel: true // grid 区域是否包含坐标轴的刻度标签。
            },
            xAxis: {
                name: '风速(M/S)',
                type: 'category',
                gridIndex: 0,
                // name: '风速(M/S)',
                nameLocation: 'center', // 坐标轴名称显示位置。
                nameGap: 40, //坐标轴名称与轴线之间的距离 15
                // type: 'category',
                axisLine: {
                    lineStyle: {
                        // color: 'rgba(43, 176, 217, 1)'
                        color: '#153E6A'
                    }
                },
                // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
                // boundaryGap: ['70%', '70%'],
                boundaryGap: false,
                // data: [0, 5, 10, 15, 20, 25]
            },
            yAxis: {
                name: '风速概率(%)',
                type: 'value',
                // 坐标轴在 grid 区域中的分隔线。
                splitLine: {
                    // show: false,
                    lineStyle: {
                        color: 'rgba(43, 176, 217, 0.3)',
                        type: 'dashed'

                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(43, 176, 217, 0.3)'
                    }
                },
                // splitLine: {
                //     // show: false,
                //     lineStyle: {
                //         color: '#50708F',
                //         type: 'dashed'
                //     }
                // },
            },
            series: [
                {type: 'line', seriesLayoutBy: 'row'},
                {type: 'line', seriesLayoutBy: 'row'},
                {type: 'line', seriesLayoutBy: 'row'}
            ]
        }

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option)
    </script>
</body>
</html>